<template>
  <div>
    <!-- 工具头 -->
    <pagetool :show-before="true">
      <template #before>
        有{{ attendInfo.tobeTaskCount }}条考勤审批尚未处理
      </template>
      <template #after>
        <el-button size="mini" type="danger">导入</el-button>
        <el-button size="mini" type="warning">提醒</el-button>
        <el-button size="mini" type="primary">设置</el-button>
        <el-button size="mini" type="default">历史归档</el-button>
        <el-button size="mini" type="primary">2021报表</el-button>
      </template>
    </pagetool>
    <!-- 内容 -->
    <div class="dashboard-container">
      <div class="app-container">
        <!-- 过滤器部门和考勤 -->
        <Filters :data="list" @change="changeData" />
        <el-table :data="pageList" border>
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="工号" prop="workNumber" />
          <el-table-column label="部门" prop="departmentName" />
          <!-- 用生成的日期列表遍历生成日期列 -->
          <el-table-column
            v-for="(day, index) in dayList"
            :key="day"
            :label="day"
          >
            <template #default="{row}">
              {{ row.attendanceRecord[index].adtStatu | formatAttendance }}
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            layout="prev, pager, next"
            :total="filteredList.length"
            :page-size="page.pagesize"
            @current-change="currentChange"
          />
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getAttendancesListMock } from '@/api/attendances'
import attendanceEnum from '@/api/constant/attendance'
import Filters from './components/filters.vue'
export default {
  components: {
    Filters
  },
  filters: {
    // 使用枚举+过滤器处理考勤状态中文显示
    formatAttendance(oldVal) {
      const obj = attendanceEnum.holidayType.find(el => Number(el.id) === Number(oldVal))
      return obj ? obj.value : ''
    }
  },
  data() {
    return {
      // 源数据
      list: [],
      // 过滤后的数据
      filteredList: [],
      // 翻页配置
      page: {
        page: 1,
        pagesize: 10
      },
      attendInfo: {
        tobeTaskCount: ''
      }
    }
  },
  computed: {
    dayList() {
      // 当有数据的时候, 拿出第一行的记录, 用里面的日期生成日期列
      // 因为每行都一样, 用第一行即可
      const list = this.list[0] ? this.list[0].attendanceRecord : []
      return list.map(el => {
        const month = el.day.toString().substring(4, 6)
        const day = el.day.toString().substring(6)
        return `${month}/${day}`
      })
    },
    statusList() {
      // 将枚举 value 组成状态列表
      return attendanceEnum.holidayType.map(el => el.value)
    },
    // 根据翻页设置计算当前页面应该显示的数据
    pageList() {
      const end = this.page.page * this.page.pagesize
      const start = end - this.page.pagesize
      return this.filteredList.slice(start, end)
    }
  },
  async created() {
    const res = await getAttendancesListMock()
    console.log(res)
    this.getAttendancesListMock()
  },
  methods: {
    async getAttendancesListMock() {
      const { rows, tobeTaskCount } = await getAttendancesListMock()
      this.list = [...rows]
      this.filteredList = [...rows]
      // 待处理的考勤数量
      this.attendInfo.tobeTaskCount = tobeTaskCount
    },
    changeData(newData) {
      this.filteredList = newData
    },
    currentChange(newPage) {
      this.page = {
        ...this.page,
        page: newPage
      }
    }
  }
}
</script>

<style>

</style>
